<template>
  <view class="fun-flex-col page">
    <view class="fun-mt-26 fun-flex-col">
      <view class="fun-flex-row fun-justify-between list-item" @click="toDetail(item)" v-for="(item, index) in list" :key="index">
        <view class="fun-flex-row fun-items-center">
          <image class="fun-shrink-0 image_5" :src="item.img" />
          <text class="fun-ml-8 font">{{item.label}}</text>
        </view>
        <image class="image_5 image_6" src="../../../static/common/arrow_right.png" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        list: [
			{
				label:"Bind/Change your Email Address",
				img:require('../../../static/common/email.png'),
				url:'/pages/mine/security/showEmail'
			},
			{
				label:"Change Login Password",
				img:require('../../../static/common/email.png'),
				url:'/pages/mine/security/password'
			}
		],
      };
    },

    methods: {
		toDetail(item){
			uni.navigateTo({url:item.url})
		},
	},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .page {
    padding: 36rpx 28rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 36rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .group_2 {
      padding-top: 16rpx;
      .image_4 {
        width: 48rpx;
        height: 48rpx;
      }
      .pos {
        position: absolute;
        left: 2rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .text_2 {
        color: #ffffff;
        font-size: 32rpx;
        font-family: SF Pro Display;
        font-weight: 300;
        line-height: 28.92rpx;
      }
    }
    .list-item {
      padding: 24rpx 0;
      background-color: #00033b;
      border-bottom: solid 2rpx #ffffff0d;
      .image_5 {
        width: 40rpx;
        height: 40rpx;
      }
      .font {
        font-size: 24rpx;
        font-family: SF Pro Display;
        line-height: 21.78rpx;
        color: #ffffff;
      }
      .image_6 {
        margin-right: 32rpx;
      }
    }
  }
</style>